<!-- tab的组件 -->
<template>
    <fieldset>
        <legend>tab切换案例</legend>
        <button v-for="btn in buttons" :key="btn" :class="['tab-button',{active:btn===selectBtn}]" @click="handleClick(btn)">{{btn}}</button>
        <!-- 这一步是渲染出按钮 :class="['tab-button',{active:btn===selectBtn}]"这一步是赋上class的两个类名，都在css中，因为active类名是高亮的不能赋给
        每个按钮，需要点击的是谁才能给谁，而selectBtn就是获取点击的是谁，在下面data中声明的，而handleClick（btn）中的btn是每个按钮的名字，然后传递到下面
        methods中，然后将点击的按钮赋给selectBtn，这样selectBtn就拿到了点击的是哪个按钮，当点击的元素和btn按钮名字对应上的时候，按钮就开始高亮 -->
        <div class="tab" :is="dynamic">432</div>
        <!--  :is="dynamic"加上这个就可以实现点击按钮就能切换对应的页面-->
    </fieldset>
</template>

<script>
//1.做好模板之后，点击谁就让谁高亮起来,编程的思维就是点击谁就给谁加上active类名
//2.通过is属性来实现对组件名字的切换

//js对象中的key一定是字符串类型
import emailCom from "./email-com.vue" //导入组件
import homeCom from "./home-com.vue"
import mineCom from "./mine-com.vue"
export default {
    data(){
        return {
            buttons:['email','home','mine'],//设置这个数组为了上面能循环按钮
            selectBtn:"email",//点击选中的是谁 里面的值写的是哪个按钮，那个按钮就是默认高冷初始值
        }
    },
    methods:{
        handleClick(btn){
            console.log(btn)//点击的每个按钮
            this.selectBtn=btn
        }
    },
    computed:{//计算属性
        dynamic(){
            return this.selectBtn + "-com" //拼接组件的名字
        }         
    },
    components:{//引入的组件都要来这里注册
        "email-com":emailCom,
        "mine-com":mineCom,
        "home-com":homeCom
    }
}
</script>


<style>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>